<template>
<div>
  <en-table-layout
      :tableData="tableData.data"
      :loading="loading"
      :height="tableHeight"
    >
    <div slot="toolbar" class="inner-toolbar">
      <div class="toolbar-btns">
        <el-button type="primary" @click="exportExcel()">导出Excel</el-button>
        <el-button type="primary" @click="handleClick()">重算佣金</el-button>
      </div>
      <div class="toolbar-search">
        <en-table-search
          @search="searchEvent"
          @advancedSearch="advancedSearchEvent"
          advanced
          advancedWidth="500"
          placeholder="请输入订单号">
          <template slot="advanced-content">
                <el-form ref="advancedForm" :model="advancedForm" label-width="80px">              
                <el-form-item label="订单状态" class="toolbar-input" label-width="90px" prop="order_status">
                    <el-select v-model="advancedForm.order_status" placeholder="请选择订单状态" class="select-get" clearable>
                      <el-option
                        v-for="option in s_commission_status"
                        :label="option.name"
                        :value="option.id"
                        :key="option.id"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                <el-form-item label="佣金类型" class="toolbar-input" label-width="90px" prop="commission_type">
                  <el-select v-model="advancedForm.commission_type" class="select-get" clearable>
                    <el-option label="平台收益" :value="1"></el-option>
                    <el-option label="邀请佣金" :value="2"></el-option>
                    <el-option label="团长佣金" :value="3"></el-option>
                    <el-option label="服务佣金" :value="4"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="推广类型" class="toolbar-input" label-width="90px" prop="commission_type">
                  <el-select v-model="advancedForm.spread_way" class="select-get" clearable>
                    <el-option label="间推" :value="0"></el-option>
                    <el-option label="直推" :value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="订单类型" class="toolbar-input" label-width="90px" prop="order_type">
                    <el-select v-model="advancedForm.order_type" placeholder="请选择订单类型" class="select-get" clearable>
                      <el-option
                        v-for="option in s_order_type"
                        :label="option.name"
                        :value="option.id"
                        :key="option.id"
                      ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="收益人昵称" class="toolbar-input" label-width="90px" prop="member_name">
                  <el-input v-model="advancedForm.member_name" placeholder="请选择收益人昵称"></el-input>
                </el-form-item>
                <el-form-item label="收益人姓名" class="toolbar-input" label-width="90px" prop="beneficiary_name">
                  <el-input v-model="advancedForm.beneficiary_name" placeholder="请输入收益人姓名"></el-input>
                </el-form-item>
                <el-form-item label="收益人电话" class="toolbar-input" label-width="90px" prop="beneficiary_mobile">
                  <el-input v-model="advancedForm.beneficiary_mobile" placeholder="请输入收益人电话"></el-input>
                </el-form-item>
                <el-form-item label="提成时间"  prop="create_time" label-width="90px">
                  <el-date-picker
                        clearable
                        v-model="advancedForm.times_range"
                        type="datetimerange"
                        align="center"
                        :editable="false"
                        unlink-panels
                        range-separator="-"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :default-time="['00:00:00', '23:59:59']">
                      </el-date-picker>
                </el-form-item>
                </el-form>
          </template>
        </en-table-search>
      </div>
    </div>
    <!-- 列表渲染 -->
      <template slot="table-columns">
        <el-table-column type="selection" min-width="50"></el-table-column>
        <el-table-column prop="profit_no" min-width="90" label="佣金单号" />
        <el-table-column prop="order_status_name" min-width="100" label="佣金状态" />
        <el-table-column prop="order_type_name" min-width="150" label="订单类型" />
        <el-table-column prop="beneficiary_name" min-width="150" label="收益人姓名" />
        <el-table-column prop="beneficiary_mobile" min-width="150" label="收益人电话" />
        <el-table-column label="佣金类型" min-width="80">
          <template slot-scope="scope">
            <span>{{scope.row.commission_type_name}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="level" min-width="80" label="团长等级"/> -->
        <el-table-column label="推广类型">
          <template slot-scope="scope">
            <span>{{s_spread[scope.row.spread_way]}}</span>
          </template>
        </el-table-column>
        <!-- <el-table-column label="代理类型" >
         <template slot-scope="scope">
            <span>{{scope.row.op_status==1?"营业中":"休息中"}}</span>
          </template>
         </el-table-column>
        <el-table-column prop="member_id" min-width="80" label="代理姓名" />
        <el-table-column prop="cell_name" min-width="100" label="代理手机号" /> -->
        <el-table-column prop="member_name" min-width="140" label="收益人昵称" />
        <el-table-column min-width="140" prop="order_sn" label="订单号" />
        <el-table-column prop="order_price" min-width="100" label="销售金额" />
        <el-table-column prop="commission_rate" min-width="100" label="提成比例">
          <template slot-scope="scope">{{ scope.row.commission_rate+"%"}}</template>
        </el-table-column>
        <el-table-column min-width="100" prop="commission_money" label="提成金额" />
        <el-table-column min-width="150" label="提成时间">
          <template slot-scope="scope">{{ scope.row.create_time | unixToDate("yyyy-MM-dd hh:mm:ss") }}</template>
        </el-table-column>
        <el-table-column min-width="150" label="发放时间">
          <template slot-scope="scope">{{ scope.row.pay_time | unixToDate("yyyy-MM-dd hh:mm:ss") }}</template>
        </el-table-column>
        <el-table-column min-width="150" label="作废时间">
          <template slot-scope="scope">{{ scope.row.cancle_time | unixToDate("yyyy-MM-dd hh:mm:ss") }}</template>
        </el-table-column>
        <el-table-column prop="seller_name" min-width="100" label="所属商户" />
        <!-- <el-table-column prop="creater_name" min-width="100" label="商户类型" />
        <el-table-column prop="creater_name" min-width="100" label="商户地区" /> -->
        <el-table-column prop="remark" min-width="100" label="备注" />
      </template>
    <!-- 分页列表 -->
    <div slot="pagination-toolbar">
      <span>合计：<span class="font-color">¥{{tableData.total_commission_money}}</span></span>
      <span>已结算：<span class="font-color">¥{{tableData.settled_commission_money}}</span></span>
      <span>未结算：<span class="font-color">¥{{tableData.unsettled_commission_money}}</span></span>
    </div>
    <el-pagination
      v-if="tableData"
      slot="pagination"
      @size-change="handlePageSizeChange"
      @current-change="handlePageCurrentChange"
      :current-page="tableData.page_no"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="tableData.page_size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.data_total">
    </el-pagination>
  </en-table-layout>

  <el-dialog
    title="提示"
    :visible.sync="orderSnDialog"
    width="500px"
    >
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">
      <el-row>
        <el-col :span="24">
          <el-form-item prop="order_sn" label="订单号:">
            <el-input v-model="ruleForm.order_sn" placeholder="请输入订单号"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleCancel()">取 消</el-button>
      <el-button type="primary" @click="handleDetermine('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</div>
</template>

<script>
  import * as API_goods from '@/api/goods'
  import * as API_LEADER from '@/api/leader';
  export default {
    name: 'leaderCommission',
    data() {
      return {
        /** 列表loading状态 */
        loading: false,
        orderSnDialog: false,
        /** 列表参数 */
        params: {
          page_no: 1,
          page_size: 10
        },
        /** 商品列表数据 */
        tableData: '',
        ruleForm: {
          order_sn: undefined
        },
        rules: {
          order_sn: [
            {
              required: true,
              message: '订单号不能为空',
              trigger: 'blur'
            }
          ]
        },
        //添加修改团长数据
        dialogTitle: '',
        titleMap: {
          addData: '新增团长',
          updateData: '修改团长'
        },

        /** 高级搜索数据 */
        advancedForm: {
          member_name: '',
          order_status: '',
          commission_type: '',
          beneficiary_name: '',
          beneficiary_mobile: '',
          order_type: '',
          spread_way: '',
          times_range: [],
          start_time: undefined,
          end_time: undefined
        },
        //佣金状态
        s_commission_status: [
          { id: 'PAID_OFF', name: '待发货' },
          { id: 'ROG', name: '已收货' },
          { id: 'CANCELLED', name: '已取消' },
          { id: 'SHIPPED', name: '已发货' },
          { id: 'COMPLETE', name: '已完成' }
        ],
        s_order_type: [
          { id: 'normal', name: '普通订单' },
          { id: 'pintuan', name: '拼团订单' },
          { id: 'shetuan', name: '社区团购订单' }
        ],
        s_spread: ['', '直推', '间推']
      }
    },
    mounted() {
      this.GET_GoodsList()
    },
    computed: {
      tableHeight (){
        return document.documentElement.clientHeight - 246 + 'px';
      }
    },
    methods: {

      /** 分页大小发生改变 */
      handlePageSizeChange(size) {
        this.params.page_size = size
        this.GET_GoodsList()
      },

      /** 分页页数发生改变 */
      handlePageCurrentChange(page) {
        this.params.page_no = page
        this.GET_GoodsList()
      },

      /** 搜索事件触发 */
      searchEvent(data) {
        this.params = {
          ...this.params,
          order_sn: data
        }
        this.params.page_no = 1
        Object.keys(this.advancedForm).forEach(key => delete this.params[key])
        this.GET_GoodsList()
      },

      /** 高级搜索事件触发 */
      advancedSearchEvent() {
        if (this.advancedForm.times_range.length > 0) {
          this.advancedForm.start_time = this.advancedForm.times_range[0].getTime() / 1000;
          this.advancedForm.end_time = this.advancedForm.times_range[1].getTime() / 1000;
          this.params = {
            ...this.params,
            ...this.advancedForm,
            'type': 2
          }
        }
        if (this.advancedForm.times_range.length === 0) {
          this.params = {
            ...this.params,
            ...this.advancedForm
          }
        }
        delete this.params.keyword
        this.params.page_no = 1
        this.GET_GoodsList()
      },

      /** 高级搜索中 分类选择组件值发生改变 */
      categoryChanged(data) {
        this.advancedForm.category_path = data.category_path || ''
      },

      GET_GoodsList() {
        this.loading = true;
        let _params = {
          // body:{},
          ...this.params
        }
        for (const _key in _params) {
          if (_params[_key] === '') { // 当条件值为''时去除条件
            delete _params[_key];
          }
        }
        API_LEADER.queryProfitList(_params).then(response => {
          this.loading = false
          this.tableData = response
        }).catch(() => (this.loading = false))
      },
      // 弹框点开
      handleClick() {     
        this.orderSnDialog = true;
      },
      // 确定重算佣点击事件
      handleDetermine(ruleForm) {
        this.$refs[ruleForm].validate((valide) => {
          if (valide) {
            API_LEADER.distributionOrderRebuild(this.ruleForm.order_sn).then(response => {
              console.log(this.ruleForm.order_sn)
              this.$message.success('操作成功');
              this.ruleForm = {
                order_sn: undefined
              }
              this.orderSnDialog = false;
            }).catch(() => {
              
            })
          }
        })
      },
      handleCancel() {
        this.ruleForm = {
          order_sn: undefined
        }
        this.orderSnDialog = false
      },
      /**
        * @date 2020/10/28
        * @author kaiqiang
        * @description { 导出Excel }
      */
      exportExcel() {
        API_LEADER.exportProfitList(this.params)
          .then(response => {
            // 处理返回的文件流
            let blob = new Blob([response], {
              type: 'application/vnd.ms-excel;charset=utf-8'
            });
            let date = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate();
            const fileName = date + name + '佣金管理.xlsx';
            if ('download' in document.createElement('a')) {
              // 非IE下载
              const elink = document.createElement('a');
              elink.download = fileName;
              elink.style.display = 'none';
              elink.href = URL.createObjectURL(blob);
              document.body.appendChild(elink);
              elink.click();
              URL.revokeObjectURL(elink.href); // 释放URL 对象
              document.body.removeChild(elink);
            } else {
              // IE10+下载
              navigator.msSaveBlob(blob, fileName);
            }
          })
          .catch((error) => {
            this.$message({
              type: 'error',
              message: error
            })
          })
      }
    }
  }
</script>


<style type="text/scss" lang="scss" scoped>
//顶部工具栏样式
.inner-toolbar{
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
  }

.select-get{
  width: 100%;
}

.font-color {
  color: red;
  padding-right: 15px;
}
</style>
